﻿<!DOCTYPE html>
<html id="home" lang="en">

<head>
    <title>Part of screen sharing ® Muaz Khan</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Inconsolata);

        html {
            background: #eee;
        }

        body {
            margin: 0;
            font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
            font-size: 1.2em;
            line-height: 1.2em;
        }

        article, footer {
            display: block;
            min-width: 360px;
            max-width: 900px;
            width: 80%;
        }

        article {
            margin: 2.5em auto 0 auto;
            border: 1px solid;
            border-color: #ddd #aaa #aaa #ddd;
            padding: 2em;
            background: #fff;
        }

        h1 {
            margin-top: 0;
        }

        article p:first-of-type {
            margin-top: 1.6em;
        }

        article p:last-child {
            margin-bottom: 0;
        }

        footer {
            margin: 0em auto 2em auto;
            text-align: center;
        }

            footer a {
                color: #666;
                text-shadow: 0 1px 1px #fff;
                text-decoration: none;
                font-size: inherit;
                padding: 1em;
            }

                footer a:hover, footer a:focus {
                    color: #111;
                }

        h1, h2 {
            font-weight: normal;
            display: inline;
            border-bottom: 1px solid black;
            padding: 0 0 3px 0;
            line-height: 36px;
        }

        a {
            color: #2844FA;
            text-decoration: none;
        }

            a:hover, a:focus {
                color: #1B29A4;
            }

            a:active {
                color: #000;
            }

        :-moz-any-link:focus {
            color: #000;
            border: 0;
        }

        ::selection {
            background: #ccc;
        }

        ::-moz-selection {
            background: #ccc;
        }

        button {
            -moz-border-radius: 3px;
            -moz-transition: none;
            -webkit-transition: none;
            background: #0370ea;
            background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
            background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
            border: 1px solid #076bd2;
            border-radius: 3px;
            color: #fff;
            display: inline-block;
            font-size: .8em;
            line-height: 1.3;
            padding: 5px 12px;
            text-align: center;
            text-shadow: 1px 1px 1px #076bd2;
            font-family: inherit;
        }

            button:hover {
                background: rgb(9, 147, 240);
            }

            button:active {
                background: rgb(10, 118, 190);
            }

            button[disabled] {
                background: none;
                border: 1px solid rgb(187, 181, 181);
                color: gray;
                text-shadow: none;
            }

        strong {
            color: rgb(204, 14, 14);
            font-family: inherit;
            font-weight: normal;
        }

        .share-me {
            background: #eee;
            padding: 2em;
            border: 2px solid black;
            display: inline-block;
            vertical-align: top;
        }

            .share-me:hover {
                background: rgb(211, 205, 205);
            }

        #second-div {
            border: 2px solid red;
        }

        #third-div {
            border: 2px solid blue;
        }

        input[type=checkbox], input[type=checkbox] ~ label {
            cursor: pointer;
            -webkit-user-select: none;
        }
    </style>
    <script>
        document.createElement('article');
        document.createElement('footer');
    </script>
    <script src="https://www.webrtc-experiment.com/screenshot.js"></script>
    <script src="https://www.webrtc-experiment.com/firebase.js"></script>
</head>

<body>
    <article>
        <a href="https://www.webrtc-experiment.com/" style="border-bottom: 1px solid #2844FA; font-size: 1.2em; position: absolute; text-decoration: none; right: 0; top: 0;">↑ WEBRTC EXPERIMENTS</a>

        <h1>Part of screen sharing

    <div title="Stop sharing your DIVs"
        style="color: red; border: 2px solid red; border-bottom: 0; display: inline-block; padding: .1em .4em;">
        <input type="checkbox" id="pause" checked>
        <label for="pause">Pause Sharing</label>
    </div>

            <script>
                var pause = document.getElementById('pause');
                pause.onchange = function () {
                    isShareDIV = !this.checked;
                };
            </script>
        </h1>

        <p>
            Copyright © 2013 <a href="https://github.com/muaz-khan" target="_blank">Muaz Khan</a>&lt;<a href="http://twitter.com/muazkh" target="_blank">@muazkh</a>&gt;.
            <a href="https://twitter.com/WebRTCWeb" target="_blank" title="WebRTC Experiments on Twitter">@WebRTCWeb</a>
        </p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>
        <div id="first-div" class="share-me" contenteditable title="Tick checkbox to share this DIV">
            <h2>First DIV</h2>

            <br />
            <input type="checkbox" id="share-div-1">
            <label for="share-div-1">Share DIV Number 1</label>
        </div>
        <div id="second-div" class="share-me" contenteditable title="Tick checkbox to share this DIV">
            <h2>Second DIV</h2>

            <br />
            <input type="checkbox" id="share-div-2">
            <label for="share-div-2">Share DIV Number 2</label>
        </div>
        <div id="third-div" class="share-me" contenteditable title="Tick checkbox to share this DIV">
            <h2>Third DIV</h2>

            <br />
            <input type="checkbox" id="share-div-3">
            <label for="share-div-3">Share DIV Number 3</label>
        </div>
        <script>
            function find(id) {
                return document.getElementById(id);
            }
            var shareFirstDIV = find('share-div-1'),
                    shareSecondDIV = find('share-div-2'),
                    shareThirdDIV = find('share-div-3');
            shareFirstDIV.onchange = shareSecondDIV.onchange = shareThirdDIV.onchange = onchange;

            function onchange(input) {
                input = input || this;
                var parent = input.parentNode;

                if (input.checked) {
                    hide(true);
                    parent.style.display = 'inline-block';
                } else hide(false);

                if (input.checked) {
                    uncheckAll();
                    input.checked = true;
                }

                window.elementToShare = parent;
                if (!isShareDIV) {
                    isShareDIV = true;
                    pause.checked = false;
                    shareDIV();
                }

                if (!input.checked) {
                    isShareDIV = false;
                    pause.checked = true;
                }
            }

            function uncheckAll() {
                shareFirstDIV.checked =
                        shareSecondDIV.checked =
                                shareThirdDIV.checked = false;
            }

            function hide(isHide) {
                shareFirstDIV.parentNode.style.display =
                        shareSecondDIV.parentNode.style.display =
                                shareThirdDIV.parentNode.style.display = isHide ? 'none' : 'inline-block';
            }

            var shareMeDIVs = document.querySelectorAll('.share-me');
            for (var i = 0; i < shareMeDIVs.length; i++) {
                shareMeDIVs[i].onclick = function () {
                    var input = this.querySelector('input');
                    input.checked = true;
                    onchange(input);
                };
            }
        </script>
        <!-- this script is taking screenshot and transmitting them over firebase -->
        <script>
            var isShareDIV = false;

            function shareDIV() {
                if (!isShareDIV) {
                    setTimeout(shareDIV, 1000);
                    return;
                }
                html2canvas(window.elementToShare, {
                    onrendered: function (canvas) {
                        var screenshot = canvas.toDataURL('image/webp', 1);
                        firebase && firebase.push({
                            userID: userID,
                            screenshot: screenshot
                        });
                        //window.requestAnimationFrame(shareDIV);
                        setTimeout(shareDIV, 500);
                    }
                });
            }
        </script>
        <br />
        <br />

        <div id="shared-parts-of-screen-preview" title="Your or your friend's shared DIVs are visible here.">
            <br />
            <br />

            <h2>Shared DIVs will be visible here ↓</h2>

        </div>
        <!-- this script is getting screenshot shared with you -->
        <script>
            var sharedPartsOfScreenPreview = document.getElementById('shared-parts-of-screen-preview');

            function getNewImage(id) {
                var image = new Image();
                image.id = id;

                sharedPartsOfScreenPreview.insertBefore(image, sharedPartsOfScreenPreview.firstChild);
                return image;
            }

            var channel = location.hash.replace('#', '') || 'Part-of-Screen-Sharing';
            var firebase = new Firebase('https://muazkh.firebaseIO.com/' + channel);
            firebase.on("child_added", function (data) {
                onMessage(data.val());
            });
            setTimeout(onFirebaseConnectionOpend, 1);
            firebase.onDisconnect().remove();

            function onMessage(data) {
                if (!data.screenshot) return;
                var image = document.getElementById(data.userID);
                if (!image) image = getNewImage(data.userID);
                image.src = data.screenshot;
            }

            window.userID = Math.random() * 1000 << 10;

            function onFirebaseConnectionOpend() {
                console.log('firebase connection is opened');
            }
        </script>
        <br />
        <br />

        <h2>intro:</h2>

        <ol>
            <li>Sharing <strong>part of the screen</strong> or <strong>region of screen</strong> (i.e. a DIV, SECTION, ARTICLE or ASIDE)... not the entire screen!</li>
            <li>Everything inside that DIV is <strong>synchronized</strong> in realtime.</li>
            <li>Works fine on all modern web browsers supporting WebRTC Data Channels.</li>
        </ol>
        <h2>how?</h2>

        <ol>
            <li>Share screenshots of the entire DIV, ASIDE or BODY element in realtime!</li>
            <li>Using Firebase to transmit screenshots in realtime! (sharing screenshots after each 500 milliseconds)</li>
            <li>It is better to "<strong>pause sharing</strong>" to scroll down and see others' shared regions.</li>
            <li>It supports multi-user connectivity too! Hmm! i.e. you can share region of screen with many friends!</li>
        </ol>
        <h2 style="text-align: center; font-weight: normal; display: block;"
            title="Using RTCDataChannel APIs to share your DIVs' screenshots. It is super-fast and 100% realtime on Firefox!">Try <a href="https://www.webrtc-experiment.com/part-of-screen-sharing/webrtc-data-channel/" target="_blank">Part
    of Screen Sharing using WebRTC Data Channel</a> / 100% realtime!
        </h2>

        <pre>
&lt;script src="https://www.webrtc-experiment.com/screenshot.js"&gt;&lt;/script&gt;
&lt;script&gt;
var divToShare = document.querySelector('div');
html2canvas(divToShare, {
    onrendered: function (canvas) {
        var screenshot = canvas.toDataURL();
        // image.src = screenshot;
        // context.drawImage(screenshot, x, y, width, height);
        // firebase.push(screenshot);
        // pubnub.send(screenshot);
        // socketio.send(screenshot);
        // signaler.send(screenshot);
        // window.open(screenshot);
    }
});

/*
 <h2>Note:</h2>
 Put above code in a function; use "requestAnimationFrame" to loop the function
 and post/transmit DataURL in realtime!

 <h2>What above code will do?</h2>
 Above code will take screenshot of the DIV or other HTML element and return you
 and image. You can preview image to render in IMG element or draw to Canvas2D.
 */
&lt;/script&gt;
            </pre>

        <br />
        <br />

        <h2 style="display: block; text-align: center;"><a
            href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/part-of-screen-sharing" target="_blank">Part of
    screen sharing is open-sourced on Github!</a></h2>

        <br />
        <br />
        <section style="border: 1px solid rgb(189, 189, 189); margin: 1em 3em; border-radius: .2em;">
            <h2 id="feedback" style="padding: .2em .4em; border-bottom: 1px solid rgb(189, 189, 189);">Feedback</h2>
            <div>
                <textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
    </article>
    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a>©
                <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>,
                <span>2013 </span>»
                <a href="mailto:muazkh@gmail.com" target="_blank">Email</a>»
                <a href="https://twitter.com/muazkh" target="_blank">@muazkh</a>»
                <a href="https://twitter.com/WebRTCWeb" target="_blank">@WebRTCWeb</a>»
                <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
    <script src="https://www.webrtc-experiment.com/commits.js"></script>
</body>
</html>
